import type { FC } from 'react';
import { useMemo } from 'react';
import classNames from 'classnames';
import { useMemoizedFn } from 'ahooks';
import { type PoiItem } from './types';
import styles from './styles.module.less';

type ResultItemProps = {
  poi: PoiItem;
  selectedPio?: PoiItem;
  onClick?: (item: PoiItem) => void;
}

const ResultItem: FC<ResultItemProps> = (props) => {
  const { poi, selectedPio } = props;
  const [photo] = poi.photos || [];

  const address = useMemo(() => {
    return [
      poi.pname,
      poi.cityname,
      poi.adname,
      poi.address
    ].join('');
  }, [poi]);

  const className = useMemo(() => {
    return classNames(
      styles.result_item, 
      selectedPio?.id === poi.id && styles.selected
    );
  }, [selectedPio, poi]);

  const handleClick = useMemoizedFn(() => {
    props.onClick?.(poi);
  });

  return (
    <div className={className} onClick={handleClick}>
      <div className={styles.result_item_content}>
        <div className={styles.name}>{poi.name}</div>
        <div className={styles.address}>地址：{address}</div>
      </div>
      {photo ? (
        <div className={styles.result_item_img}>
          <img src={photo.url} alt={photo.title} />
        </div>
      ) : null}
    </div>
  );
}

export default ResultItem;